<template>
  <div class="about" style="width: 60%; margin: 0 auto;">
    <el-card v-for="info in info" :key="info.id" class="box-card" style="margin-top: 20px;white-space: pre-wrap">
      <div slot="header" class="clearfix">
        <span>{{ info.name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          学号：{{ info.Id }}</span>

      </div>
      <span style="line-height: 30px;"><strong>所负责的部分：</strong>{{ info.work }}</span>
    </el-card>
  </div>
</template>


<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<script>
export default {
  name: 'AboutMeView',
  created() {
    this.setPageTitle();
  },
  data() {
    return {
      info: [
        {
          id: 1,
          name: "刘林培言",
          Id: "2008010726",
          work: "前端页面的搭建，数据的分页查询，用户登录的验证，登录成功后，后端会返回一个jwt，后续请求需要判断是否有jwt，会登录根据权限，"+
          "更改界面\n歌曲的增删改查，可实现上传音乐文件到mongodb存储桶，也可通过调用api的方式引用网易的音乐。\n" +
            "实现音乐的搜索及歌手的模糊搜索，可读取存储桶中的文件，实现在网页中播放，可切换歌曲",

        },
        {
          id: 2,
          name: "钟泽凯",
          Id: "2008010711",
          work: "用户的管理模块，主要有用户信息的增删改查,可以实现单独提交一个修改信息的业务，例如：" +
            "只需要修改用户头像，只会提交一个头像的数据\n幻灯片的修改，实现在管理界面中，输入新的图片地址，点击提交后"
            +"会自动更换幻灯片",
        },
        {
          id: 3,
          name: "黄晓冰",
          Id: "2008010716",
          work: "留言板模块，负责对用户的评论进行展示包含用户评论的增删改查，可以实现多条评论同时删除,可将指定的一些评论设置" +
            "为精选，在前端页面展示",
        }
      ]
    }
  },
  methods: {
    setPageTitle() {
      document.title = this.$route.meta.title || 'My App';
    },
  }
}
</script>